<template>
  <div id="shopcart">
    <nav-bar class="cart-nav">
      <div  slot="center">购物车({{length}})</div>
    </nav-bar>
    <scroll class="cart-sroll" ref="scroll">
      <cartlist :cartlist="cart_list"></cartlist>
    </scroll>
    <cartbottombar></cartbottombar>

  </div>
</template>

<script>

import NavBar from "../../components/common/navbar/NavBar";
import {mapGetters} from 'vuex'
import Cartlist from "./CartChild/CartList/CartList";
import Scroll from "../../components/common/scroll/Scroll";
import Cartbottombar from "./CartChild/cartbottombar";

export default {
  name: "Shopcart",
  components: {
    Cartbottombar,
    Scroll,
    Cartlist,
    NavBar
  },
  computed:{
    ...mapGetters({
      length:'getcartlenth',
      cart_list:'getcart'
    })
  },
  activated() {
    this.$refs.scroll.refresh()
  }

}
</script>

<style scoped>
  #shopcart{
    height:100vh
  }
  .cart-nav{
    background-color: var(--color-tint);
    color: #ffffff;
  }

  .cart-sroll{
    height:calc(100% - 44px - 49px - 40px);
    overflow: hidden;
  }
</style>
